<template>
	<view class="overflow-hidden">
		
		<!-- 搜索内容区 -->
		<view class="padding-lr padding-top-xs pos-f w-full bg-drak">
			<view class="search-area margin-bottom-sm pos-r w-full dflex-b border-radius-big">
				<view class="dflex-c flex1">
					<view class="icon-search pos-a">
						<text class="iconfont iconsousuo-01"></text>
					</view>
					<input type="text" class="padding-left w-full padding-tb-xs  box-sizing-b" maxlength="20" 
						 style="border-top-right-radius: 0;border-bottom-right-radius: 0;"
						placeholder="请输入关键字" @confirm="toSearch" v-model="keyword" />
			
				</view>
				<view class="bg-base padding-tb-16 padding-lr-lg" @click="toSearch">搜索</view>
			</view>
		</view>
		<view class="w-full" style="height: 96rpx;"></view>
		
		<view v-if="loaded" class="goodsContent border-radius">
			<view class="dflex padding-top-sm padding-lr dflex-s">
				<!-- 左侧 -->
				<view class="margin-right-xs wpre-50 overflow-hidden">
					<view class="dflex-b dflex-wrap-w">
						<view class="product-box pos-r" v-for="(item, pidx) in tabDatas.left" :key="item._id" :id="'l_' + idx + '_' + item._id" @click="toDetail(item)">
							<view class="bg-main margin-bottom-sm border-radius">
								<view class="pos-r dflex-c" style="width: 335rpx;height: 335rpx;">
									<image lazy-load class="wh-full" :src="item.img" mode="aspectFill"></image>
									<view v-if="item.isvideo" class="iconfont iconbofang pos-a ft-base fs-xl" style="top: 10rpx; right: 10rpx;"></view>
								</view>
								<view class="padding-lr-sm margin-top-sm clamp-2">{{item.note_title}}</view>
								<view class="dflex-b padding-lr-sm margin-tb-sm">
									<view class="dflex flex1" style="width: 60%;" @click.stop="toUser(item)">
										<image :src="item.create_uheadimg || '/static/images/user/default.png'" class="border-radius-c headimg" style="width: 50rpx; height: 50rpx;"></image>
										<view class="ft-dark margin-left-xs fs-xxs">{{item.create_uname}}</view>
									</view>
									<view class="dflex" @click.stop="toLikes(item)">
										<view class="iconfont animated" :class="[ item.likes ? 'ft-base iconaixin-01' : 'iconaixin', item.islikes ? 'scale' : '' ]"></view>
										<view class="clamp ft-dark margin-left-xs fs-xxs">{{item.note_praise || 0}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 右侧 -->
				<view class="margin-left-xs wpre-50 overflow-hidden">
					<view class="dflex-b dflex-wrap-w">
						<view class="product-box pos-r" v-for="(item, pidx) in tabDatas.right" :key="item._id" :id="'r_' + idx + '_' + item._id" @click="toDetail(item)">
							<view class="bg-main margin-bottom-sm border-radius">
								<view class="pos-r dflex-c" style="width: 335rpx;height: 335rpx;">
									<image lazy-load class="wh-full" :src="item.img" mode="aspectFill"></image>
									<view v-if="item.isvideo" class="iconfont iconbofang pos-a ft-base fs-xl" style="top: 10rpx; right: 10rpx;"></view>
								</view>
								<view class="padding-lr-sm margin-top-sm clamp-2">{{item.note_title}}</view>
								<view class="dflex-b padding-lr-sm margin-tb-sm">
									<view class="dflex flex1" style="width: 60%;" @click.stop="toUser(item)">
										<image :src="item.create_uheadimg || '/static/images/user/default.png'" class="border-radius-c headimg" style="width: 50rpx; height: 50rpx;"></image>
										<view class="ft-dark margin-left-xs fs-xxs">{{item.create_uname}}</view>
									</view>
									<view class="dflex" @click.stop="toLikes(item)">
										<view class="iconfont animated" :class="[ item.likes ? 'ft-base iconaixin-01' : 'iconaixin', item.islikes ? 'scale' : '' ]"></view>
										<view class="clamp ft-dark margin-left-xs fs-xxs">{{item.note_praise || 0}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				
				</view>
			</view>
			
			<!-- 空白页 -->
			<use-empty-emoji v-if="tabDatas.loaded && tabDatas.empty" e-style="round" e-type="note"
				tip=" " btn-tip="去写笔记" height="80vh" @to="to('/sub-shopping/pages/note')"></use-empty-emoji>
			
			<!-- 上拉加载更多 -->
			<use-loadmore v-if="tabDatas.loaded && !tabDatas.empty && tabDatas.hasmore" 
				:type="tabDatas.loadingType"></use-loadmore>
		</view>
		
		<!-- 置顶 -->
		<use-totop ref="usetop" bottom="150"></use-totop>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		computed: {
			...mapState(['member', 'islogin'])
		},
		data() {
			return {
				scrollLeft: 0,
				tabDatas: {
					datas: [], 			// 总数据 ids
					left: [], 			// 左侧数据
					right: [], 			// 右侧数据
					page: 1, 			// 页数
					cnt: 0, 			// 总数据量
					top: 0, 			// 设置滚动条 top 值
					empty: false, 		// 数据为空
					hasmore: false, 	// 存在未加载数据
					loadingType: 'more',
					loaded: false,
					ids: [], 
					val: null
				},
				keyword: '',
				loaded: false,
				curTab: 0,
				reqData: {
					rows: 30
				},
				swiperHeight: '100vh',
				screenWidth: 0,
			};
		},
		// 上拉加载更多
		onReachBottom(res) {
			console.log('onReachBottom', res);
			this.loadData();
		},
		onPageScroll(e) {
			this.$refs.usetop.change(e.scrollTop);
		},
		onLoad() {
			this.loadData();
			
			// 点赞数据同步
			uni.$on('__shopping_likes', (res) => {
				console.log('点赞数据同步 shopping ', res);
				let operData;
				operData = this.tabDatas.left.find(x => x._id == res.note._id);
				if (operData && operData._id) {
					operData.likes = res.likes;
					operData.note_praise += res.likes ? 1 : -1;
				}
				
				operData = this.tabDatas.right.find(x => x._id == res.note._id);
				if (operData && operData._id) {
					operData.likes = res.likes;
					operData.note_praise += res.likes ? 1 : -1;
				}
			});
			
			// 收藏数据同步
			uni.$on('__shopping_collect', (res) => {
				console.log('收藏数据同步 shopping ', res);
				let operData;
				operData = this.tabDatas.left.find(x => x._id == res.note._id);
				if (operData && operData._id) {
					operData.collect = res.collect;
					operData.note_collect += res.collect ? 1 : -1;
				}
				
				operData = this.tabDatas.right.find(x => x._id == res.note._id);
				if (operData && operData._id) {
					operData.collect = res.collect;
					operData.note_collect += res.collect ? 1 : -1;
				}
			});
		},
		methods: {
			loadData(callback) {
				console.log('this.tabDatas', this.tabDatas);
				let curData = this.tabDatas;
				if (['loading', 'nomore'].includes(curData.loadingType)) { 
					//防止重复加载
					return; 
				}
				// 当前数据加载中
				curData.loadingType = 'loading';
				
				// 加载中
				if (!curData.loaded) {
					uni.showLoading({
						title: '加载中'
					})
				}
				
				// 当前分类
				this.reqData.tid = '';
				this.reqData.ids = curData.ids;
				this.reqData.val = curData.val;
				this.reqData.keyword = this.keyword;
				
				this.$func.usemall.call('shopping/list', this.reqData).then(res => {
					uni.hideLoading();
					
					if (!this.loaded) this.loaded = true;
					if (!curData.loaded) curData.loaded = true;
					
					console.log('shopping.list res', res, );
					if (res.code == 200) {
						let leftDatas = [];
						let rightDatas = [];
						
						// 指定位置插入广告
						// const ads = res.result.ads.filter(x => (x.pos.class == curData.cpid || (curData.cpid == '' && ['推荐', '附近'].includes(x.pos.class))) && x.pos.top_class == (tid == 0 ? '发现' : '同城'));
						// // console.log('ads', curData.cpid, ads);
						// ads.forEach(x => {
						// 	//if (x.pos.location < curData.cnt + res.datas.length + 1) {
						// 		res.datas.splice(x.pos.location - 1, 0, {
						// 			...x,
						// 			isad: 1
						// 		});
						// 	//}
						// });
						
						const datasLength = res.datas.length;
						if (datasLength <= 0 || datasLength < this.reqData.rows) {
							// 当前数据为空或返回数据小于请求 rows，则没有更多数据
							curData.loadingType = 'nomore';
						} else {
							curData.loadingType = 'more';
							curData.page == 1 ? curData.hasmore = !0 : null;
						}
						
						res.datas.forEach((x, i) => {
							if (curData.datas.find(p => p == x._id)) return;
							
							// 当前数据的顺序
							x.__idx = curData.cnt + i;
							
							// 是否已点赞
							x.likes = x.likes || false;
							x.islikes = false;
							
							if (x.note_imgs && x.note_imgs.length > 0) {
								x.img = x.note_imgs[0].url;
							} 
							
							if (x.note_video && x.note_video.url) {
								// 避免黑屏，截取5s视频帧
								x.img = x.note_video.url + '?x-oss-process=video/snapshot,t_5000,f_jpg,w_750,m_fast';
								x.isvideo = true;
							}
							
							i % 2 == 0 ? leftDatas.push(x) : rightDatas.push(x);
							
							if (i+1 == datasLength) {
								// 设置最后一条请求参数值
								this.setReqData(curData, x, res.datas);
							}
						});
						
						// 第一页
						if (curData.page == 1) {
							curData.cnt = 0;
							curData.left = leftDatas;
							curData.right = rightDatas;
							curData.datas = res.datas.map(x => x._id);
						} else {
							curData.left = [...curData.left, ...leftDatas];
							curData.right = [...curData.right, ...rightDatas];
							curData.datas = [...curData.datas, ...res.datas.map(x => x._id)];
						}
						
						curData.page++;
						
						// 记录总数据数
						curData.cnt = curData.left.length + curData.right.length;
						
						// 当前数据为空
						curData.empty = false;
						if (curData.cnt <= 0) {
							curData.empty = true;
						}
					}
				});
			},
			// 设置请求参数值
			setReqData(cur, data, datas) {
				cur.val = data.create_time;
				cur.ids = datas.filter(x => x.create_time == cur.val).map(x => x._id);
			},
			// 搜索
			toSearch() {
				this.tabDatas.loaded = false;
				this.tabDatas.val = null;
				this.tabDatas.ids = [];
				this.tabDatas.page = 1;
				this.tabDatas.cnt = 0;
				this.tabDatas.datas = [];
				this.tabDatas.empty = false;
				this.tabDatas.hasmore = true;
				this.tabDatas.loadingType = 'more';
				
				this.loadData();
			},
			// 个人中心
			toUser(item) {
				uni.navigateTo({
					url: '/sub-shopping/pages/user?id=' + item.create_uid
				})
			},
			// 点赞|取消点赞
			toLikes(item) {
				if (!this.islogin) {
					this.$api.tologin()
					return;
				}
				
				if (item.islikes) return;
				item.islikes = true;
				
				console.log('toLikes', item);
				let url = 'shopping/likes';
				
				if (item.likes) {
					url = 'shopping/likesCancel';
					item.note_praise--;
					if (item.note_praise < 0) item.note_praise = 0;
				} else {
					item.note_praise++;
				}
				
				item.likes = !item.likes;
				this.$func.usemall.call(url, { id: item._id }).then(res => {
					console.log('toLikes', url, res);
					item.islikes = false;
					if (res.code == 200) {
						return;
					}
					
					this.$api.msg(res.msg);
					item.likes = !item.likes;
					if (item.likes) {
						item.note_praise++;
					} else {
						item.note_praise--;
						if (item.note_praise < 0) item.note_praise = 0;
					}
				})
			},
			// 跳转详情页
			toDetail(res) {
				uni.setStorage({
					key: '__shopping_detail_data',
					data: res
				});
				uni.setStorage({
					key: '__shopping_detail_datas',
					data: [...this.tabDatas.left, ...this.tabDatas.right]
				});
				
				uni.navigateTo({
					url: `/sub-shopping/pages/detail?id=${res._id}`
				});
			},
			// 统一跳转接口，拦截未登录路由
			to(url) {
				if (!this.islogin) {
					this.$api.tologin()
					return;
				}
			
				uni.navigateTo({
					url
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
		width: 100vw;
		height: 100vh;
		/* #ifdef H5 */
		height: calc(100vh - 50px) ;
		/* #endif */
	}

	.search-area {
		
		input {
			padding-left: 80rpx;
			height: 76rpx;
			line-height: 76rpx;
			background-color: #fff;
		}
		
		.icon-search {
			top: 50%;
			left: 30rpx;
			transform: translate(0, -50%);
			z-index: 1;
		
			text {
				color: #c0c0c0;
			}
		}
	}
	
	.border-line {
		border: 1rpx solid rgba(0, 0, 0, .1);
	}

	.goodsContent {
		width: 100%;
		
		.ft-dark {
			color: #585858;
		}
	}

	.goodsLeftList,
	.goodsRightList {
		width: 50%;
		overflow: hidden;
	}

	.goodsLeftList {
		margin-right: 10rpx;
	}

	.goodsRightList {
		margin-left: 10rpx;
	}

</style>
